<template>
    <div class="f" :style="{ fontSize: postFontSize + 'em' }">我是父组件App
    <hr />
    <button @click="handleClick">父传子prop将title="My journey with Vue"传给子组件</button>
    
    
    </div>
    <Child1 :title="title" :myname="myname" @enlarge-text="postFontSize += 0.1"/>

      

</template>

<script>
import Child1 from './Child1.vue'
export default{
    data() {
        return{
            title: 'My journey with Vue',
            myname:'',
            postFontSize: 0.5
        }
    },
    
    methods:{
        handleClick(){
            this.myname = '自定义名称'
        }
    },
    
    components:{
        Child1
    }

}
</script>

<style scoped>
.f{
    height: 260px;
    background-color: #ccc;
    color: red;
}
</style>